<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/search.css" />
		<style type="text/css">
		</style>
	</head>
	
	<body>
		<div class="mui-content center">
			<div class="mui-row title">
				<div class="search mui-col-sm-1 mui-col-xs-10">
					<div class="mui-input-row mui-search">
						<input type="search" id="btn" class="mui-input-clear" checked="checked" placeholder="搜索感兴趣的内容...">
					</div>
				</div>
				<div id="searchback" class="mui-col-xs-2 cancel">取消</div>
			</div>
		</div>
		<div class="word" id="content" >
			<div class="word_clear">
				<div class="word_title mui-clearfix">
					<div class="delete mui-icon mui-icon-trash"></div>
					<div class="recent">最近搜索</div>
				</div>
				<div class="recent_piece">
					<span class="into_piece">开黑吃鸡</span>
					<span class="into_piece">参加聚会</span>
					<span class="into_piece">出去一起唱歌</span>
					<span class="into_piece">结伴回家</span>
				</div>
				<div class="word_title mui-clearfix">
					<div class="popular">热门搜索</div>
				</div>
				<div class="popular_piece">
					<span class="into_piece">吃鸡开黑</span>
					<span class="into_piece">出行拼单</span>
					<span class="into_piece">购物拼团</span>
				</div>
			</div>
			<div id="item" class="mui-content">
		</div>
		
		</div>
	</body>
	<script src="js/mui.min.js"></script>
	<script src="js/ip.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		mui.init()
		
		
		var clearDom = document.getElementsByClassName("word_clear")[0];
		var contentDom = document.getElementById("content");
		var itemDom = document.getElementById("item");
		document.getElementById("btn").addEventListener("input", function() {
			var key = this.value;
			if(key === undefined || key.replace(/\s+/g, "") === "") {
				clearDom.style.display = "block";
				itemDom.innerHTML = "";
			} else {
				clearDom.style.display = "none";
				mui.post("http://" + ip + "/xiaojv/Api/index.php?p=front&m=search&a=search", {
					key: key
				}, function(data) {
					for(var i = 0; i < data.length; i++) {
						var entity = data[i];
						itemDom.innerHTML +=
						`<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media" onclick="tap(${entity["id"]})">
						<a href="javascript:;" >
						<img class="mui-media-object mui-pull-left" src="img/search.png" style="height: 20px;">
						<div class="mui-media-body">
						<span>${entity["activityName"]}</span>
						</div>
						</a>
						</li>
						</ul>`
					}
					console.log(itemDom.childNodes.length)
				}, 'json');
			}
		});

		function tap(num) {
			mui.openWindow({
				url: "template/activitydetails.html",
				id: "activitydetails",
				extras: {
					activityid: num
				}
			});
		}
		document.getElementById("searchback").addEventListener("tap", function() {
			mui.back();
		});
	
	
	var nativeWebview, imm, InputMethodManager;
		var initNativeObjects = function() {
		    if (mui.os.android) {
		        var main = plus.android.runtimeMainActivity();
		        var Context = plus.android.importClass("android.content.Context");
		        InputMethodManager = plus.android.importClass("android.view.inputmethod.InputMethodManager");
		        imm = main.getSystemService(Context.INPUT_METHOD_SERVICE);
		    } else {
		        nativeWebview = plus.webview.currentWebview().nativeInstanceObject();
		    }
		};
		var showSoftInput = function() {
	    var nativeWebview = plus.webview.currentWebview().nativeInstanceObject();
	    if (mui.os.android) {
	        //强制当前webview获得焦点
	        plus.android.importClass(nativeWebview);
	        nativeWebview.requestFocus();
	        imm.toggleSoftInput(0, InputMethodManager.SHOW_FORCED);
	    } else {
	        nativeWebview.plusCallMethod({
	            "setKeyboardDisplayRequiresUserAction": false
	        });
	    }
	    setTimeout(function() {
	       //此处可写具体逻辑设置获取焦点的input
	       var inputElem = document.querySelector('input');
	              inputElem.focus(); 
	    }, 200);
	};
		mui.plusReady(function() {
		    initNativeObjects();
		    showSoftInput();
		});
		
	</script>

</html>